<admintpl file="wx_header"/>
<link href="__PUBLIC__/flat/assets/Flat-UI-master/dist/css/user.css" rel="stylesheet">

<div class="row ">
    <div class="col-xs-12">
        <nav class="navbar navbar-inverse navbar-embossed wx-nav" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="#">Wechat管理</a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse-01">
                <ul class="nav navbar-nav navbar-left">
                    <volist name="menu" id="vo">
                        <li><a href="{:U('Material/index',array('key'=>$vo['key']))}" class="{:$vo['key']==$pageKey?'active':''}">{$vo.title}</a></li>
                    </volist>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav><!-- /navbar -->
    </div>
</div> <!-- /row -->
<div class="row" id="main">
    <div class="col-xs-12">
        <div class="col-xs-4">
            <input class="todo-search-field" type="search" v-model="keywords" placeholder="标题/作者/摘要"><button class="btn btn-sm btn-default" v-on:click="search">搜 索</button>
        </div>
        <div class="col-xs-12 clearFloat">
            <div style="float:left;font-size:14px;line-height:34px">图文消息(共{{lists.length}})</div>
            <div style="float: right"><a class="btn btn-success btn-xs" href="{:U('add',array('key'=>$pageKey))}">＋图文消息</a></div>
        </div>
    </div>

    <div class="col-xs-12" style="margin-top: 1%;padding-left: 3%;padding-right: 3%">
        <template v-for="list in lists">
            <div class="col-xs-4 martial-block" style="width: 32%;margin-right: 1%">
                <div class="col-xs-12 center-block" style="border-bottom: 1px solid #e7e7e7;line-height:43px;font-size:13px;">
                    <span>更新于 {{list.modify_time}}</span>
                </div>
                <template v-if="list.extra.length == 1">
                    <div class="col-xs-12 martial-thumb" >
                        <p><a class="martial-title">{{list.extra.title}}</a></p>
                        <p class="marital-img"><img src="https://mmbiz.qlogo.cn/mmbiz/Nmhj2icTtJ6Qp8lBkn3LrhiaAVibZ3IS36yvppZAEBrX3QVWxkuic28jk4577P9rln5icsOKYXVhCXeIOXAoRDwpQ9w/0?wx_fmt=png" /></p>
                        <p class="martial_desc">{{list.extra.digest|substr}</p>
                    </div>
                    <div class="col-xs-12 marital-footer" style="margin-left: -15px;margin-right:-15px;width:120%;">
                        <div class="col-xs-6 " style="border-right:1px solid #e1e1e1">
                            <button class="center-block" style="border: none;background-color: transparent"><i class="fui-video-24">修改</i></button>
                        </div>
                        <div class="col-xs-6 center-block">
                            <button class="center-block" style="border: none;background-color: transparent"><i class="fui-video-24">删除</i></button>
                        </div>
                    </div>
                </template>
                <template v-else-if="list.extra.length<1">
                    <div class="col-xs-12 martial-thumb">
                        内容错误
                    </div>
                </template>
                <template v-else>
                    <template v-for="(item,index) in list.extra">
                        <div class="col-xs-12 martial-thumb" v-if="index==0" @mouseover="shade">
                            <div class="marital-img">
                                <img :src="item.thumb" class=""/>
                                <p class="martial-title bg-shade">{{item.title}}</p>
                            </div>
                            <!--<p class="martial_desc">{{item.digest|substr}}</p>-->
                        </div>
                        <div class="col-xs-12 martial-mul clearFloat"  v-else>
                            <p class="marital-mul-img"><img :src="item.thumb" /></p>
                            <p class="marital-mul-title">{{item.title}}</p>
                        </div>
                    </template>

                    <div class="col-xs-12 marital-footer" style="margin-left: -15px;margin-right:-15px;width:120%;">
                        <div class="col-xs-6 " style="border-right:1px solid #e1e1e1">
                            <button class="center-block" style="border: none;background-color: transparent"><i class="fui-video-24">修改</i></button>
                        </div>
                        <div class="col-xs-6 center-block">
                            <button class="center-block" style="border: none;background-color: transparent"><i class="fui-video-24">删除</i></button>
                        </div>
                    </div>
                </template>
            </div>
        </template>
    </div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<admintpl file="footer"/>
<script>
    var main;
    $(function () {
        //loading层
        var _list = {$lists};
        main = new Vue({
            el:'#main',
            data:{
                keywords:'',
                lists:_list,
            },
            methods:{
                search:function () {
                    alert(this.keywords);
                },
                shade:function () {

                }
            },
            filters:{
                substr:function (str) {
                    var n = 120;
                    var r=/[^\x00-\xff]/g;
                    if(str.replace(r,"mm").length<=n){return str;}
                    var m=Math.floor(n/2);
                    for(var i=m;i<str.length;i++){
                        if(str.substr(0,i).replace(r,"mm").length>=n){
                            return str.substr(0,i)+"...";
                        }
                    }
                    return str;
                }
            },
            mounted:function () {
                //layer.close(index);
            }
        })
    })
</script>